<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" style="border: solid 1px #000;" width="500" height="500"></canvas>

    <script>
        //获取canvas元素
        var myCanvas = document.getElementById("myCanvas");

        //获取canvas的上下文对象
        var ctx = myCanvas.getContext("2d");


        //线条的粗细
        ctx.lineWidth = 2;
        //线条颜色
        ctx.strokeStyle = "red";

        //线帽
        ctx.lineCap = "round";

        //起点
        //    ctx.moveTo(50,50);
        //    //终点
        //    ctx.lineTo(200,200);

        //    //绘制
        //    ctx.stroke();

        //    //画第二条

        //    //开辟一个路径
        //    ctx.beginPath();
        //    ctx.lineWidth=5;
        //     //起点
        //     ctx.moveTo(200,50);
        //     //终点
        //     ctx.lineTo(50,200);
        //     //绘制
        //     ctx.stroke();


        //白板画线条

        myCanvas.onmousedown = function (e) {

            ctx.beginPath();
            //获取鼠标的坐标
            var x = e.clientX;
            var y = e.clientY;

            //设置起点
            ctx.moveTo(x, y);

            //设置鼠标移动事件
            myCanvas.onmousemove = function (e) {
                //获取鼠标的坐标
                //   var x=e.clientX;
                //   var y=e.clientY;
                //偏移
                x = e.clientX - myCanvas.offsetLeft;
                y = e.clientY - myCanvas.offsetTop

                ctx.lineTo(x, y);
                ctx.stroke();

            }
            myCanvas.onmouseup = function () {
                myCanvas.onmousemove = null;
            }
        }







    </script>
</body>

</html>